microApp 的实践

August 21, 2022

一、什么是微前端？

微前端的概念是由 ThoughtWorks 在 2016 年提出的，它借鉴了微服务的架构理念，核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用融合为一个完整的应用，或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。

它主要解决了两个问题：

随着项目迭代应用越来越庞大，难以维护。
跨团队或跨部门协作开发项目导致效率低下的问题。

当然，如果您还不清楚需不需使用，那就是不需要使用

我需要使用微前端是由于有两个已经开发好的项目，需要整合在一起，而使用 iframe 打通有需要解决复杂的权限问题且性能也不好，所以就直接使用微前端了。

二、怎么实现微前端

至少有两种方法

使用 iframe
使用微前端框架，比如 microApp

我之前也使用过阿里的乾坤，感觉不好用。这次看京东的 microApp，确实用起来还可以。

三、怎么使用 microApp

1、子应用

1.1 hash 路由

准备一个 hash 路由的子应用。

1.2 配置可跨域

开发环境下，只要配置 vue.config.js 就好了

// vue.config.js
module.exports = {
  devServer: {
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
}

服务器环境配置 nginx，以下提供参考

location / {
    add_header Access-Control-Allow-Origin *;
}

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
    add_header Access-Control-Allow-Origin *;
}

location ~ .*\.(js|css)?$
{
    add_header Access-Control-Allow-Origin *;
}

2、主应用

2.1 使用 history 路由

这里和子应用配合。

2.2 安装使用依赖

对于主应用来说只要安装一个依赖

npm i @micro-zoe/micro-app --save

然后再使用它就行

// index.js
import microApp from '@micro-zoe/micro-app'

microApp.start()

2.3 页面使用

以下示例供参考

<template>
  <micro-app name="categories" url="http://localhost:8000"> </micro-app>
</template>
<script>
  export default {
    created() {
      // 设置子应用的路由
      window.location.hash = "#/categories"
    },
  }
</script>